{$layout}

{$var "footer"}
<!-- 图表相关 -->
<script type="text/javascript" src="/js/echarts.min.js"></script>

<!-- 地图相关 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=DF6fe2b62ea3a7b2cd7a30694b79069f" ></script>
{$end}

<div v-if="mongoError.length > 0" class="ui message warning">
    {{mongoError}}，<a href="/settings/mongo">去配置</a> 或者启动本机的MongoDB后，<a href="/log">刷新此页面</a>。
</div>

<div v-if="mongoError.length == 0">
   <div>
       <div class="ui grid four column segment charts-box">
           <!-- QPS -->
           <div class="ui column" v-if="qpsChartOptions != null" v-html="CHART.gauge(qpsChartOptions)"></div>

           <!-- Bandwidth -->
           <div class="ui column" v-if="bandwidthChartOptions != null" v-html="CHART.gauge(bandwidthChartOptions)"></div>

           <!-- Requests -->
           <div class="ui column" v-if="requestChartOptions != null" v-html="CHART.line(requestChartOptions)" style="width:46%"></div>
       </div>
   </div>

    <div class="search-box close" v-show="!searchBoxVisible">
        <button class="ui button tiny basic" type="button" v-on:click="showSearchBox()" :class="{primary:hasSearchConditions()}" title="展开筛选条件">筛选 <i class="ui icon chevron down" :class="{white:hasSearchConditions()}"></i> </button> &nbsp;
        <button class="ui button tiny basic" type="button" v-if="isPlaying" v-on:click="pause()" title="暂停日志刷新">暂停 <i class="ui icon pause"></i> </button>
        <button class="ui button tiny basic" type="button" v-if="!isPlaying" v-on:click="pause()" title="恢复日志刷新">继续 <i class="ui icon play"></i> </button>
    </div>

    <div class="ui message warning" v-if="!isPlaying">
        日志刷新功能已被暂停， <a href="" v-on:click.prevent="pause()">恢复日志刷新</a>
    </div>

    <div class="search-box" v-show="searchBoxVisible">
        <a href="" v-on:click.prevent="hideSearchBox()" class="close-btn" :class="{'clean-btn':!hasSearchConditions()}" title="收起窗口"><i class="ui icon chevron up circular"></i></a>
        <a href="" v-on:click.prevent="resetSearchBox()" class="clean-btn" v-if="hasSearchConditions()" title="重置条件"><i class="ui icon undo circular"></i></a>
        <form class="ui form">
            <div class="ui grid three column">
               <div class="ui field column">
                   终端IP：<input type="text" placeholder="x.x.x.x" v-model="searchIp" :class="{focus:searchIp.trim().length > 0}"/>
               </div>
                <div class="ui field column">
                    域名：<input type="text" name="domain" placeholder="比如 xxx.com" v-model="searchDomain" :class="{focus:searchDomain.trim().length > 0}"/>
                </div>
                <div class="ui field column">
                    终端OS：<input type="text" name="os" placeholder="比如 windows" v-model="searchOs" :class="{focus:searchOs.trim().length > 0}"/>
                </div>
                <div class="ui field column">
                    终端浏览器：<input type="text" name="browser" placeholder="比如 chrome" v-model="searchBrowser" :class="{focus:searchBrowser.trim().length > 0}"/>
                </div>
                <div class="ui field column">
                    耗时大于：
                    <div class="ui right labeled input">
                        <input type="text" name="minCost" placeholder="比如 10" v-model="searchMinCost" :class="{focus:searchMinCost.trim().length > 0}"/>
                        <div class="ui label">ms</div>
                    </div>
                </div>
                <div class="ui field column">
                    关键词：<input type="text" name="keyword" placeholder="比如 /user/profile" v-model="searchKeyword" :class="{focus:searchKeyword.trim().length > 0}"/>
                </div>
            </div>
        </form>
    </div>

    <div v-if="logs.length > 0">
        <table class="ui table log-table">
            <tr v-for="(log, index) in logs" class="log-row">
                <td class="log-td">
                    <div :id="'animation-' + log.id" :class="log_animation(log)">
                        <p v-on:click="showLog(index)" v-bind:class="{ error:log.status>=400 }">
                            <span class="browser">
                                <i class="icon" :class="log.browserIcon" v-if="log.browserIcon.length > 0"></i>
                                <span v-if="log.extend.client.browser.family.length > 0 && log.browserIcon.length == 0">{{log.extend.client.browser.family}}</span>
                            </span>

                            {{log.remoteAddr}} [{{log.timeLocal}}] <em>&quot;{{log.requestMethod}} {{log.requestScheme}}://{{log.host}}{{log.requestURI}} <a :href="log.requestScheme + '://' + log.host + log.requestURI" target="_blank" title="新窗口打开" class="disabled"><i class="external icon tiny"></i> </a> {{log.proto}}&quot;</em> - 耗时:{{formatCost(log.requestTime)}} ms
                            <i class="ui icon angle" v-bind:class="{ down:!log.isOpen, up:log.isOpen }"></i>
                        </p>
                    </div>

                    <!-- 详情菜单 -->
                    <div class="ui top attached menu tabular tab-menu small" v-if="log.isOpen">
                        <a class="item" :class="{active:log.tabName == null || log.tabName == 'summary'}" v-on:click.prevent="showLogTab(log, index, 'summary')">综合信息</a>
                        <a class="item" :class="{active:log.tabName == 'responseHeader'}" v-on:click.prevent="showLogTab(log, index, 'responseHeader')">响应数据<span>（Response Header）</span></a>
                        <a class="item" :class="{active:log.tabName == 'request'}" v-on:click.prevent="showLogTab(log, index, 'request')">请求数据<span>（Request Header）</span></a>
                        <a class="item" :class="{active:log.tabName == 'preview'}" v-on:click.prevent="showLogTab(log, index, 'preview')">预览</a>
                        <!--<a class="item" :class="{active:log.tabName == 'responseBody'}" v-on:click.prevent="showLogTab(log, index, 'responseBody')">响应内容<span>（Response）</span></a>-->
                        <a class="item" :class="{active:log.tabName == 'cookie'}" v-on:click.prevent="showLogTab(log, index, 'cookie')">Cookie</a>
                        <a class="item" :class="{active:log.tabName == 'client'}" v-on:click.prevent="showLogTab(log, index, 'client')">终端信息</a>
                    </div>

                    <!-- 综合信息 -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && (log.tabName == null || log.tabName == 'summary')">
                        <tr>
                            <td width="50%">请求ID<em>(ID)</em>：{{log.id}}</td>
                            <td>请求概要<em>(Request)</em>：{{log.request}}</td>
                        </tr>
                        <tr>
                            <td>请求URI<em>(RequestURI)</em>：{{log.requestURI}}</td>
                            <td>请求方法<em>(RequestMethod)</em>：{{log.requestMethod}}</td>
                        </tr>
                        <tr>
                            <td>主机地址<em>(Host)</em>：{{log.host}}</td>
                            <td>请求来源<em>(Referer)</em>：<span v-if="log.referer.length == 0">-</span><span v-if="log.referer.length > 0">{{log.referer}}</span></td>
                        </tr>
                        <tr>
                            <td>终端地址<em>(RemoteAddr:RemotePort)</em>：{{log.remoteAddr}}:{{log.remotePort}}</td>
                            <td>终端信息<em>(UserAgent)</em>：{{log.userAgent}}</td>
                        </tr>
                        <tr>
                            <td v-if="log.extend.client.os != null">操作系统(OS)：{{log.extend.client.os.family}} {{log.extend.client.os.major}}</td>
                            <td>浏览器<em>(Browser)</em>：{{log.extend.client.browser.family}} {{log.extend.client.browser.major}}</td>
                        </tr>
                        <tr>
                            <td>协议<em>(Proto)</em>：{{log.proto}}</td>
                            <td v-bind:class="{error:log.status>=400}">状态<em>(StatusMessage)</em>：<span v-if="log.statusMessage.length == 0">-</span><span v-if="log.statusMessage.length > 0">{{log.statusMessage}}</span></td>
                        </tr>
                        <tr>
                            <td>文件类型<em>(ContentType)</em>：<span v-if="log.contentType.length == 0">-</span><span v-if="log.contentType.length > 0">{{log.contentType}}</span></td>
                            <td>发送字节<em>(BytesSent)</em>：{{log.bytesSent}}</td>
                        </tr>
                        <tr>
                            <td>ISO8601时间：{{log.timeISO8601}}</td>
                            <td>本地时间(TimeLocal)：{{log.timeLocal}}</td>
                        </tr>
                        <tr>
                            <td>后端服务<em>(Backend)</em>：
                                <span v-if="log.backendAddress.length > 0">{{log.backendAddress}}</span>
                                <span v-if="log.backendAddress.length == 0">-</span>
                            </td>
                            <td>
                                Fastcgi服务：
                                <span v-if="log.fastcgiAddress.length > 0">{{log.fastcgiAddress}}</span>
                                <span v-if="log.fastcgiAddress.length == 0">-</span>
                            </td>
                        </tr>
                    </table>

                    <!-- 响应数据 -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && log.tabName == 'responseHeader' && log.responseHeaders != null">
                        <tbody v-for="(value, key) in log.responseHeaders">
                            <tr v-for="subValue in value">
                                <td class="middle-title">{{key}}</td>
                                <td>{{subValue}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 请求数据 -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && log.tabName == 'request' && log.requestHeaders != null">
                        <tbody v-if="log.hasRequestHeaders != null && !log.hasRequestHeaders">
                            <tr>
                                <td>没有设定请求信息</td>
                            </tr>
                        </tbody>
                        <tbody v-for="(value, key) in log.requestHeaders">
                            <tr v-for="subValue in value">
                                <td class="middle-title">{{key}}</td>
                                <td>{{subValue}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 预览 -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && log.tabName == 'preview'">
                        <tbody v-if="log.previewImageLoaded && (log.previewImageURL == null || log.previewImageURL.length == 0)">
                            <tr>
                                <td>目前只能预览图片资源</td>
                            </tr>
                        </tbody>
                        <tbody v-if="log.previewImageURL != null && log.previewImageURL.length > 0">
                            <tr>
                                <td>每次预览可能会产生新的请求日志</td>
                            </tr>
                            <tr>
                                <td class="preview-box">
                                    <a :href="log.previewImageURL" target="_blank" title="点击打开"><img :src="log.previewImageURL"/></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- cookies -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && log.tabName == 'cookie' && log.cookies != null">
                        <tbody v-if="log.countCookies == 0">
                            <tr>
                                <td colspan="2">没有任何Cookie</td>
                            </tr>
                        </tbody>
                        <tbody v-for="(value, key) in log.cookies">
                            <tr>
                                <td class="title">{{key}}</td>
                                <td>{{value}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 终端 -->
                    <table cellpadding="0" cellspacing="0" class="ui table selectable" v-if="log.isOpen && log.tabName == 'client'">
                        <tbody>
                            <tr>
                                <td class="middle-title">综合信息<em>(UserAgent)</em></td>
                                <td>{{log.userAgent}}</td>
                            </tr>
                            <tr>
                                <td>IP</td>
                                <td>{{log.remoteAddr}}</td>
                            </tr>
                            <tr>
                                <td>设备<em>(Device)</em></td>
                                <td>
                                    <span v-if="log.extend.client.device.family.length > 0 && log.extend.client.device.family != 'Other'">{{log.extend.client.device.family}}</span>
                                    <span v-if="log.extend.client.device.family.length == 0 || log.extend.client.device.family == 'Other'">暂时无法识别</span>
                                </td>
                            </tr>
                            <tr>
                                <td>操作系统<em>(OS)</em></td>
                                <td>
                                    <span v-if="log.osVersion.length > 0">{{log.osVersion}}</span>
                                    <span v-if="log.osVersion.length == 0">暂时无法识别</span>
                                </td>
                            <tr>
                                <td>浏览器<em>(Browser)</em></td>
                                <td>
                                    <span v-if="log.browserVersion.length > 0">{{log.browserVersion}}</span>
                                    <span v-if="log.browserVersion.length == 0">暂时无法识别</span>
                                </td>
                            </tr>
                            <tr>
                                <td>地理位置<em>(Location)</em></td>
                                <td>
                                    <span v-if="log.geoAddr.length > 0">{{log.geoAddr}}</span>
                                    <span v-if="log.geoAddr.length == 0">暂时无法识别</span>
                                </td>
                            </tr>
                            <tr v-if="log.geoAddr.length > 0">
                                <td colspan="2">
                                    <div class="map-box" :id="'map-box-' + log.id">地图加载中...</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div v-if="started && logs.length == 0">
        <a class="disabled" v-if="!hasSearchConditions()">当天还没有访问。</a>
        <span class="disabled" v-if="hasSearchConditions()">当天还没有筛选符合条件的访问，可以尝试去掉筛选条件（<a href="" v-on:click.prevent="resetSearchBox()">清除筛选条件</a> ）。</span>
    </div>

    <!-- loading indicator -->
    <div v-if="!started">
        <div class="ui active inline loader small"></div> &nbsp; loading...
    </div>
</div>